<template>
  <a-card :body-style="{ padding: '1px 10px 0px' }" :bordered="true">
    <div slot="title">{{title}}</div>
    <div v-if="showChart && mydata.length!==0">
      <v-chart :forceFit="true" :height="height" :data="mydata" :scale="scale">
        <v-tooltip />
        <v-axis />
        <v-legend />
        <v-smooth-line position="time*value" />
        <v-point position="time*value" shape="circle" />
      </v-chart>
    </div>
    <div v-if="mydata.length===0" style="height:250px;text-align:center;line-height:250px;">暂无数据</div>
  </a-card>
</template>

<script>
//   const data = [
//   { year: '1991', value: 15468 },
//   { year: '1992', value: 16100 },
//   { year: '1993', value: 15900 },
//   { year: '1994', value: 17409 },
//   { year: '1995', value: 17000 },
//   { year: '1996', value: 31056 },
//   { year: '1997', value: 31982 },
//   { year: '1998', value: 32040 },
//   { year: '1999', value: 33233 },
// ];

const scale = [{
  dataKey: 'value',
  // min: 1,
}, {
  dataKey: 'time',
  type:'cat',
  tickCount:10
  // min: 0,
  // max: 1,
}];

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    mydata:{
      type: Array,
      default:()=>[]
    }
  },
  data() {
    return {
      scale,
      height: 250,
      showChart:false
    }
  },
  mounted() {
    this.$nextTick(() => {this.showChart= true})
    let _this = this
    console.log(_this._props,99999)
    console.log(this.mydata)
  }
}
</script>

<style scoped>
    .chart-card-header {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
</style>